import React from 'react';
import styles from './index.less';
import {Col, Row} from 'antd';
import AdvancedBtn from "@/button";
import {btnSound, playSound} from "@/utils/sounds-res";

/**
 * 胜利界面的弹窗
 */
class Win extends React.Component {

  render() {
    const {user, enemy, gameScore, userIsKick} = this.props;
    const { winTypeMsg } = gameScore;
    let userScore = gameScore.winScore;
    let enemyScore = gameScore.failScore;
    // 当胜利方不是我方时，展示的是扣分数据
    if (user.first !== gameScore.isRedColorWin) {
      userScore = gameScore.failScore;
      enemyScore = gameScore.winScore;
    }

    return (
      <div className={styles.bg}>
        <div className={styles.title}>
          <div title={'icon'}/>
          <span>对局结果</span>
        </div>
        <div className={styles.close} onClick={e => { playSound(btnSound); this.props.closeWin(); }}>
          <div title={'close'} />
        </div>
        <div className={styles.content}>
          <Row>
            <div className={styles.winType}>{winTypeMsg}</div>
          </Row>
          <Row>
            <div className={styles.name}>我方：<span>{user?.userName}</span></div>
          </Row>
          <Row>
            <div
              className={styles.score}>积分：<span>{`${(user?.score || 0) + userScore}（${userScore > 0 ? '+' : ''}${userScore}）`}</span>
            </div>
          </Row>
          <Row>
            <div className={styles.name}>对方：<span>{enemy?.userName}</span></div>
          </Row>
          <Row>
            <div
              className={styles.score}>积分：<span>{`${(enemy?.score || 0) + enemyScore}（${enemyScore > 0 ? '+' : ''}${enemyScore}）`}</span>
            </div>
          </Row>

          <Row>
            <Col span={5}/>
            <Col span={14}>
              <AdvancedBtn type="normal" text={userIsKick ? '返回平台' : '返回房间'} onClick={e => { playSound(btnSound); this.props.goBack() }} />
            </Col>
            <Col span={5}/>
          </Row>
        </div>
      </div>
    );
  }
}


export default Win;
